﻿@page "/tree-grid/paging"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p> This sample demonstrates the Tree Grid paging feature. In this sample, click the numeric items to navigate to another page. You can also change the page size using the dropdown list.</p>
</SampleDescription>
<ActionDescription>
   <p>Paging allows you to display the contents of the Tree Grid in page segments. By default, paging is disabled. To enable paging,
    set the <code>AllowPaging</code> property to true. <code> TreeGridPageSettings->PageSizes </code> property enables a dropdown in pager which allows you to change the number of records in the Tree Grid dynamically.</p>
   <p>In this demo, the Tree Grid is rendered with <code>TreeGridPageSettings->PageSizes</code> set to true and  have an option to change the pagesize of Tree Grid dynamically.</p>
   <p>More information on the paging feature can be found in this  <a target='_blank'  href='https://blazor.syncfusion.com/documentation/treegrid/paging/' >documentation</a> section. </p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
                <SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID" Height="315" TreeColumnIndex="1" AllowPaging="true">
                <TreeGridPageSettings PageSizes="@PageSizes" PageCount="5" PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" IsPrimaryKey="true" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="170"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="EndDate" HeaderText="End Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeGridData { get; set; }
    public List<string> PageSizes { get; set; }

    protected override void OnInitialized()
    {
        this.TreeGridData = SelfReferenceData.GetTree();
        this.PageSizes = new List<string>() { "2", "4", "5", "10", "15", "20", "All" };

    }
}
